<script setup lang="ts">
import { find } from "lodash";
import { ref } from "vue";
import { LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { useLocalStore } from "../../../store/index";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePoint, queryPoints } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
import DangerAPI from "@/api/DangerAPI";
import moment from "moment";
const { L }: any = window;
const pointListRef = ref([]);
const dialogVisible = ref<boolean | number>(false);
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { markerClusterFlag, visiblePointClassIds } = storeToRefs(localStore);
const mck = ref(0);
const props = defineProps({
  inspUserPosition: Array<any>,
});
const inspUserPositionData = ref([]);
const getAllPoints = () => {
  // let params = {
  //   StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
  //   EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
  // };
  // DangerAPI.api_insp_task_user(params).then(({ data, errors, succeeded }) => {
  //   if (succeeded) {
  //     pointListRef.value = data
  //       .filter((item: any) => item.longitude)
  //       .map((item: any) => {
  //         return {
  //           ...item,
  //           latlng: [item.latitude, item.longitude],
  //           icon: getIcon(),
  //         };
  //       });
  //   }
  // });
  pointListRef.value = inspUserPositionData.value
    .filter((item: any) => item.positions)
    .map((item: any) => {
      return {
        ...item,
        latlng: [item.positions[0].latitude, item.positions[0].longitude],
        icon: getIcon(),
      };
    });
};

const getIcon = () => {
  const iconUrl = getAssetsFile("icons/personLocation.svg");
  return L.icon({
    iconUrl,
    iconSize: [32, 32],
    iconAnchor: [16, 27],
  });
};

onMounted(() => getAllPoints());

watchEffect(() => {
  // if (props.inspUserPosition.length) {
  //   inspUserPositionData.value = [
  //     props.inspUserPosition[props.inspUserPosition.length - 1],
  //   ];
  // } else {
  //   inspUserPositionData.value = [];
  // }

  inspUserPositionData.value = props.inspUserPosition;

  getAllPoints();
});
</script>

<template>
  <LMarker
    :key="inspUserId"
    v-for="{ latlng, inspUserId, icon, checked } in pointListRef"
    :lat-lng="latlng"
    :icon="icon"
    :visible="checked"
    :attribution="String(inspUserId)"
  >
  </LMarker>
</template>

<style scoped lang="scss"></style>
